import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, message, PageHeader, Card, Table } from 'antd';
import { Modal, Image, Select, Input } from 'antd'
import { UserOutlined, LaptopOutlined, NotificationOutlined, SearchOutlined } from '@ant-design/icons';
import axios from 'axios'
import UpdateOrSaveDialog from '../subjectOne/subjectOneDialog'
import { checkAdmin } from '../../../../utils/loginUtils/loginMethod'
import api from '../../../../utils/requestUtils/apiConfig'
export default () => {
    const { TabPane } = Tabs;
    const history = useHistory()
  
    /*************************************** */
    const [dataSource, setDataSource] = useState([])
    const [tableLoading, setTableLoading] = useState(false)
    const [visible, setVisible] = useState(false)
    const [defaultValue, setDefaultValue] = useState({})
    const [option, setOption] = useState('save')
    const [repeat, setRepeat] = useState(0)
    const [type, setType] = useState(1)
    const [question, setQuestion] = useState('')
    const [deleteVisible, setDeleteVisible] = useState(false)
    const [id, setId] = useState(0)

    //表格数据获取
    const querySubjectOneQuestion = async () => {
        setTableLoading(true)
        await axios({
            url: api.queryAllSubjectOneQuestion,
            method: 'get',
            headers: '',
            params: {},
        }).then((res) => {
            const result = res.data.data
            const message = res.data.message
            if (message == 'success') {
                setDataSource(result)
            }
            else {
                setDataSource([])
            }
            setTableLoading(false)
        })
    }



    const columns = [
        {
            title: '类型',
            dataIndex: 'type',
            render: (text, record, index) => {
                if (text == 1) { return (<span>道路交通安全法律法规</span>) }
                if (text == 2) { return (<span>交通信号</span>) }
                if (text == 3) { return (<span>安全文明驾驶基础知识</span>) }
                if (text == 4) { return (<span>机动车驾驶操作基础知识</span>) }
                if (text == 5) { return (<span>A2/B2 专属题目</span>) }
                if (text == 6) { return (<span>A1/B1/A3 专属题目</span>) }
                if (text == 7) { return (<span>交通事故救护常识</span>) }
            }
        },
        {
            title: '问题',
            dataIndex: 'question',
        },
        {
            title: '选项A',
            dataIndex: 'optionOne',
        },
        {
            title: '选项B',
            dataIndex: 'optionTwo',
        },
        {
            title: '选项C',
            dataIndex: 'optionThree',
        },
        {
            title: '选项D',
            dataIndex: 'optionFour',
        },
        {
            title: '答案',
            dataIndex: 'answer',
            render: (text, record, index) => {
                if (text == 1) { return (<span>A</span>) }
                if (text == 2) { return (<span>B</span>) }
                if (text == 3) { return (<span>C</span>) }
                if (text == 4) { return (<span>D</span>) }
            }
        },
        {
            title: '图片',
            dataIndex: 'picture',
            render: (text, record, index) => {
                if (text == null || text == '') {
                    return (
                        <span>没有图片</span>
                    )
                } else {
                    return (
                        <Button onClick={() => {
                            Modal.error({
                                title: '本题图片',
                                content: <Image src={`http://image.jsyst.cn/images201305/${text}`}></Image>,
                                icon: <span />
                            })
                        }}>查看图片</Button>
                    )
                }

            }
        },
        {
            title: '操作',
            // dataIndex: 'optionFour',
            render: (text, record, index) => {
                return (
                    <Space>

                        <Button onClick={() => {
                            setDefaultValue(record)
                            setOption('update')
                            setVisible(true)
                        }}>
                            编辑
                        </Button>
                        <Button onClick={() => {
                            setId(record.id)
                            setDeleteVisible(true)
                        }}>
                            删除
                        </Button>
                    </Space>
                )
            }
        },
    ]
    const selectOption = [
        { label: "道路交通安全法律法规", value: 1 },
        { label: "交通信号", value: 2 },
        { label: "安全文明驾驶基础知识", value: 3 },
        { label: "机动车驾驶操作基础知识", value: 4 },
        { label: "货车专属题目", value: 5 },
        { label: "客车专属题目", value: 6 },
        { label: "交通事故救护常识", value: 7 },
    ]
    const handleSearch = async () => {

        const params = {
            type: type,
            question: question,
        }
        setTableLoading(true)
        await axios({
            url: api.querySubjectOneQuestionByCondition,
            method: 'post',
            headers: '',
            params: '',
            data: params
        }).then((res) => {
            const result = res.data.data
            const message = res.data.message
            if (message == 'success') {
                setDataSource(result)
            }
            else {
                setDataSource([])
            }
            setTableLoading(false)
        })
    }
    const handleOk = () => {
        const params = {
            id: id
        }
        axios({
            url: api.deleteSubjectOneQuestion,
            method: 'get',
            headers: '',
            params: params,
        }).then((result) => {
            const mes = result.data.message
            if (mes == 'success') {
                message.success("删除成功")
                setRepeat(repeat + 1)
            }
            else {
                message.error("删除失败")
            }

            setDeleteVisible(false)
        })
    }
    const saveQuestion = () => {
        setDefaultValue({})
        setOption('save')
        setVisible(true)
    }
    //表格数据获取
    useEffect(() => {
        querySubjectOneQuestion()
    }, [repeat])


    return (
        <div>
            <Space
                direction='vertical'
            >
                <Space>
                    <Space>
                        <span>试题类型：</span>
                        <Select
                            style={{ width: 300 }}
                            value={type}
                            options={selectOption}
                            onChange={(value) => {
                                setType(value)
                            }}
                        />
                    </Space>

                    <Space>
                        <span>题目：</span>
                        <Input
                            style={{ width: 300 }}
                            placeholder="请输入试题"
                            value={question}
                            onChange={(e) => { setQuestion(e.target.value) }}

                        />
                    </Space>

                    <Button onClick={() => { handleSearch() }} type="primary" icon={<SearchOutlined />}>
                        查询
                    </Button>

                    <Button
                        type='primary'
                        onClick={() => { saveQuestion() }}
                        style={{ marginLeft: 430 }}
                    > 添加试题</Button>
                </Space>

                <Space>
                    <Card
                        style={{ width: 1385 }}
                    >
                        <Table
                            bordered
                            loading={tableLoading}
                            columns={columns}
                            dataSource={dataSource}
                        />
                    </Card>
                </Space>
            </Space>
            <UpdateOrSaveDialog
                defaultValue={defaultValue}
                setDefaultValue={setDefaultValue}
                visible={visible}
                setVisible={setVisible}
                option={option}
                setRepeat={setRepeat}
                repeat={repeat}

            />
            <Modal
                title="确认删除"
                visible={deleteVisible}
                onOk={handleOk}
                okText="确认"
                cancelText="取消"
                onCancel={()=>{
                    setDeleteVisible(false)
                }}
            // confirmLoading={confirmLoading}
            // onCancel={handleCancel}
            />

        </div>
    )
}


